<!DOCTYPE html>
<html>

<head>
    
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer">

<meta name="description" content="A new Hugo site.">
<title>
    Laravel Vue 开发小记 (一) - dashjay
</title>



<link rel="shortcut icon" href="/sam.ico">








<link rel="stylesheet" href="/css/main.min.4321edce0de245f4b1d32680d89ac669940fe5dec17e1791c721d9a0954987b4.css" integrity="sha256-QyHtzg3iRfSx0yaA2JrGaZQP5d7BfheRxyHZoJVJh7Q=" crossorigin="anonymous" media="screen">





<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Didact+Gothic">

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="http://dashjay.gitee.io/tn.png"/>

<meta name="twitter:title" content="Laravel Vue 开发小记 (一)"/>
<meta name="twitter:description" content="学习青岛OJ和iview的使用API的方式 以下是存放API的js
import Vue from &#39;vue&#39; import axios from &#39;axios&#39; Vue.prototype.$http = axios; axios.defaults.baseURL = &#39;/api&#39;; axios.defaults.xsrfHeaderName = &#39;X-CSRFToken&#39;; axios.defaults.xsrfCookieName = &#39;csrftoken&#39;; //所有的api export default { register(data) { return ajax(&#39;user/register&#39;, &#39;post&#39;, {data}) }, Login(data) { return ajax(&#39;user/login&#39;, &#39;post&#39;, {data}) }, Logout() { return ajax(&#39;user/logout&#39;, &#39;get&#39;) } } /** * @param url * @param method get|post|put|delete... * @param options * @returns {Promise} */ function ajax(url, method, options) { if (options !== undefined) { var {params = {}, data = {}} = options } else { params = data = {} } return new Promise((resolve, reject) =&gt; { axios({ url, method, params, data })."/>

<meta property="og:title" content="Laravel Vue 开发小记 (一)" />
<meta property="og:description" content="学习青岛OJ和iview的使用API的方式 以下是存放API的js
import Vue from &#39;vue&#39; import axios from &#39;axios&#39; Vue.prototype.$http = axios; axios.defaults.baseURL = &#39;/api&#39;; axios.defaults.xsrfHeaderName = &#39;X-CSRFToken&#39;; axios.defaults.xsrfCookieName = &#39;csrftoken&#39;; //所有的api export default { register(data) { return ajax(&#39;user/register&#39;, &#39;post&#39;, {data}) }, Login(data) { return ajax(&#39;user/login&#39;, &#39;post&#39;, {data}) }, Logout() { return ajax(&#39;user/logout&#39;, &#39;get&#39;) } } /** * @param url * @param method get|post|put|delete... * @param options * @returns {Promise} */ function ajax(url, method, options) { if (options !== undefined) { var {params = {}, data = {}} = options } else { params = data = {} } return new Promise((resolve, reject) =&gt; { axios({ url, method, params, data })." />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://dashjay.gitee.io/posts/laravel-vue/" />
<meta property="og:image" content="http://dashjay.gitee.io/tn.png"/>
<meta property="article:published_time" content="2019-09-03T00:00:00+00:00" />
<meta property="article:modified_time" content="2019-09-03T00:00:00+00:00" /><meta property="og:site_name" content="Call me Sam" />


    

    
    
    
    <title>
        
        Laravel Vue 开发小记 (一)
        
    </title>
</head>

<body>
    
    
    <header class="wrap flex-container">
        <h1>Laravel Vue 开发小记 (一)</h1>
    </header>
    
    <main class="wrap">
        
<div class="flex-container">
    <aside role="complementary">
        Tue Sep 03, 2019 &#183; 222 words
        <div class="tag-container">
            
            
            <span class="tag">
                <a href="/tags/laravel/">
                    laravel
                </a>
            </span>
            
            
            
            <span class="tag">
                <a href="/tags/vue/">
                    vue
                </a>
            </span>
            
            
        </div>
    </aside>
    <hr />
    <article role="article">
        <h1 id="学习青岛oj和iview的使用api的方式">学习青岛OJ和iview的使用API的方式</h1>
<p>以下是存放API的js</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">Vue</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;vue&#39;</span>
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">axios</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;axios&#39;</span>

<span style="color:#a6e22e">Vue</span>.<span style="color:#a6e22e">prototype</span>.<span style="color:#a6e22e">$http</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">axios</span>;
<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">defaults</span>.<span style="color:#a6e22e">baseURL</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;/api&#39;</span>;
<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">defaults</span>.<span style="color:#a6e22e">xsrfHeaderName</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;X-CSRFToken&#39;</span>;
<span style="color:#a6e22e">axios</span>.<span style="color:#a6e22e">defaults</span>.<span style="color:#a6e22e">xsrfCookieName</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;csrftoken&#39;</span>;

<span style="color:#75715e">//所有的api
</span><span style="color:#75715e"></span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
    <span style="color:#a6e22e">register</span>(<span style="color:#a6e22e">data</span>) {
        <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">ajax</span>(<span style="color:#e6db74">&#39;user/register&#39;</span>, <span style="color:#e6db74">&#39;post&#39;</span>, {<span style="color:#a6e22e">data</span>})
    },
    <span style="color:#a6e22e">Login</span>(<span style="color:#a6e22e">data</span>) {
        <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">ajax</span>(<span style="color:#e6db74">&#39;user/login&#39;</span>, <span style="color:#e6db74">&#39;post&#39;</span>, {<span style="color:#a6e22e">data</span>})
    },
    <span style="color:#a6e22e">Logout</span>() {
        <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">ajax</span>(<span style="color:#e6db74">&#39;user/logout&#39;</span>, <span style="color:#e6db74">&#39;get&#39;</span>)
    }
}

<span style="color:#75715e">/**
</span><span style="color:#75715e"> * @param url
</span><span style="color:#75715e"> * @param method get|post|put|delete...
</span><span style="color:#75715e"> * @param options
</span><span style="color:#75715e"> * @returns {Promise}
</span><span style="color:#75715e"> */</span>
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">ajax</span>(<span style="color:#a6e22e">url</span>, <span style="color:#a6e22e">method</span>, <span style="color:#a6e22e">options</span>) {
    <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">options</span> <span style="color:#f92672">!==</span> <span style="color:#66d9ef">undefined</span>) {
        <span style="color:#66d9ef">var</span> {<span style="color:#a6e22e">params</span> <span style="color:#f92672">=</span> {}, <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> {}} <span style="color:#f92672">=</span> <span style="color:#a6e22e">options</span>
    } <span style="color:#66d9ef">else</span> {
        <span style="color:#a6e22e">params</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">data</span> <span style="color:#f92672">=</span> {}
    }
    <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">new</span> Promise((<span style="color:#a6e22e">resolve</span>, <span style="color:#a6e22e">reject</span>) =&gt; {
        <span style="color:#a6e22e">axios</span>({
            <span style="color:#a6e22e">url</span>, <span style="color:#a6e22e">method</span>, <span style="color:#a6e22e">params</span>, <span style="color:#a6e22e">data</span>
        }).<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">res</span> =&gt; {
            <span style="color:#a6e22e">resolve</span>(<span style="color:#a6e22e">res</span>)
        }).<span style="color:#66d9ef">catch</span>(<span style="color:#a6e22e">error</span> =&gt; {
            <span style="color:#a6e22e">reject</span>(<span style="color:#a6e22e">error</span>);
        });
    })
}
</code></pre></div><h2 id="有了该api文件之后由于该js的自给自足在其他地方调用起来非常方便并且是restapi">有了该API文件之后，由于该JS的自给自足，在其他地方调用起来非常方便并且是<strong>RestAPI</strong></h2>
<p>下方是我的一个Vuex的Js文件</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">api</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;@/pages/api&#39;</span>


<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">mutations</span> <span style="color:#f92672">=</span> {
    <span style="color:#a6e22e">updateProfile</span>(<span style="color:#a6e22e">state</span>, <span style="color:#a6e22e">profile</span>) {
        <span style="color:#a6e22e">state</span>.<span style="color:#a6e22e">profile</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">profile</span>;
        <span style="color:#75715e">// TODO 未来在这里处理i18n的问题
</span><span style="color:#75715e"></span>        <span style="color:#75715e">// if (profile.language) {
</span><span style="color:#75715e"></span>        <span style="color:#75715e">//     i18n.locale = profile.language
</span><span style="color:#75715e"></span>        <span style="color:#75715e">// }
</span><span style="color:#75715e"></span>    }
};

<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">actions</span> <span style="color:#f92672">=</span> {
    <span style="color:#75715e">//user actions 中的获取用户信息的
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">getProfile</span>({<span style="color:#a6e22e">commit</span>}) {
        <span style="color:#75715e">//调用api中的请求获取用户信息
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">api</span>.<span style="color:#a6e22e">getUserInfo</span>().<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">res</span> =&gt; {
            <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">status</span>) {
                <span style="color:#75715e">// 获取成功...
</span><span style="color:#75715e"></span>                <span style="color:#a6e22e">commit</span>(<span style="color:#e6db74">&#39;updateProfile&#39;</span>, <span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">object</span>);
            } <span style="color:#66d9ef">else</span> {
                <span style="color:#75715e">// 获取失败...
</span><span style="color:#75715e"></span>                <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">msg</span>);
            }
        })
    },
    <span style="color:#75715e">// 清除用户信息的操作
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">clearProfile</span>({<span style="color:#a6e22e">commit</span>}) {
        <span style="color:#a6e22e">api</span>.<span style="color:#a6e22e">Logout</span>().<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">response</span> =&gt; {
            <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;注销成功&#39;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">response</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">msg</span>)
        }).<span style="color:#66d9ef">catch</span>(<span style="color:#a6e22e">error</span> =&gt; {
            <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;注销成功&#39;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">error</span>)
        });
        <span style="color:#a6e22e">commit</span>(<span style="color:#e6db74">&#39;updateProfile&#39;</span>, {});
        <span style="color:#a6e22e">storage</span>.<span style="color:#a6e22e">clear</span>()
    },
};

......
</code></pre></div><h1 id="vuex的使用还有待学习">Vuex的使用还有待学习</h1>
<blockquote>
<p>这样做的一个好处就是容易统一管理，比如在Vue文件中这样使用</p>
</blockquote>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
<span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">mapGetters</span>, <span style="color:#a6e22e">mapActions</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;vuex&#39;</span>
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span>{
  <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
    ...<span style="color:#a6e22e">mapActions</span>([<span style="color:#e6db74">&#39;getProfile&#39;</span>, <span style="color:#e6db74">&#39;changeModalStatus&#39;</span>, <span style="color:#e6db74">&#39;clearProfile&#39;</span>]),
  }

  <span style="color:#a6e22e">Logout</span>() {
      <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">clearProfile</span>();
      <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;LOGOUT&#39;</span>)
  }
}
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</code></pre></div><p>使用mapGetters 和 mapActions 可以容易把vuex 里各种复杂的API直接映射出来，不但方便调用行，同时也方便管理</p>

    </article>
</div>


        
<nav role="navigation" class="flex-container bottom-menu">
    
<hr />
<p>


    
        <a href="/posts">back</a>
        
            &#183;
        
    

    
        
            <a href="/posts">我的文章</a>
        
    
    
        
            &#183; 
            <a href="/gallery">画册</a>
        
            &#183; 
            <a href="/portfolio">珍贵时光</a>
        
            &#183; 
            <a href="/about">关于我</a>
        
    
    &#183; 
    <a href="/">
        main
    </a>

</p>
</nav>

    </main>
    
    <footer class="flex-container footer">I will code for a long time. Would you?</footer>
    
    
</body>

</html>